<template>
  <view class="notice">
    <image src="../../static/images/notice-icon.png" mode="widthFix" style="width:60rpx;" ></image>
    <view class="noticeSwiper">
      <swiper class="swiper" :autoplay="true" :vertical="true" :circular="true">
        <swiper-item class="swiperItem" v-for="item of notice" :key="item.id">
          <view class="swiperText">{{ item.notice }}</view>
        </swiper-item>
      </swiper>
    </view>
    <view class="noticeIcon">
      <i class="iconfont icon-arrow-right"></i>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    notice: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  methods: {},
};
</script>

<style lang="less" scoped>
.notice {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  padding: 0 24rpx;
  background: #fff;
  border-radius: 16rpx;

}

.noticeSwiper {
  flex: 1;
  overflow: hidden;
  margin: 0 20rpx;
}

.swiper,
.swiperItem,
.swiperText {
  height: 68rpx;
}

.swiperText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24rpx;
  color: #8c8c8c;
  line-height: 68rpx;
}

.iconfont {
  font-size: 20rpx;
  color: #8c8c8c;
}
</style>
